import { ref } from 'vue';
import { TodoService } from '@/services/todo.service';
import type { TodoItem } from '@/types/todo';

export function useTodos() {
  const todos = ref<TodoItem[]>([]);

  const fetchTodos = async () => {
    todos.value = await TodoService.getTodos();
  };

  const addTodo = async (text: string) => {
    const newTodo = await TodoService.addTodo(text);
    todos.value.push(newTodo);
  };

  const toggleTodo = async (id: number) => {
    const updatedTodo = await TodoService.toggleTodo(id);
    const index = todos.value.findIndex(todo => todo.id === id);
    if (index !== -1) todos.value[index] = updatedTodo;
  };

  const removeTodo = async (id: number) => {
    await TodoService.removeTodo(id);
    todos.value = todos.value.filter(todo => todo.id !== id);
  };

  return {
    todos,
    fetchTodos,
    addTodo,
    toggleTodo,
    removeTodo,
  };
}
